<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
         .b1 div:nth-child(1)并没有生效，因为这行样式执行的时候首先将里面的孩子进行编号，
         光头强是1号，熊大是2号，熊二是3号，然后再执行：nth-child(1)，这句会寻找1号孩子，
         看是否是div，因为1号光头强是p元素，不是div，因此不会有任何反应

         简单来说，这行代码会先看nth-child(1)找到第一个孩子，然后看第一个孩子是否是div
         */
        .b1 div:nth-child(1){
            color: red;
        }
        /* 
        nth-of-type()会把指定的盒子进行编号，对于.b2 div:nth-of-type(1)这行代码来说，他会将div进行编号，熊大是1号，熊二是2号
        然后再编号完成的孩子里面寻找第一个孩子，也就是从div里面选择第一个孩子

        简单来说，这行代码会先找指定的盒子，然后将指定的孩子汇集到一起挑某个孩子
        */
        .b2 div:nth-of-type(1) {
            background-color: orange;
        }

        /* 
        1. nth-child对父元素里面所有孩子排序选择(序号是固定的）先找到第n个孩子，然后看看是否和E匹配
        2. nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
        */
    </style>
</head>
<body>
    <section class="b1">
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
     </section>

     <section class="b2">
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
     </section>
</body>
</html>